<template>
  <a-layout-header
    :style="{ background: themeStore.isDark ? '#141414' : '#fff' }"
    :class="{ tabsSytle: !themeStore.multiTabs }"
  >
    <!-- 头部左右两侧布局 -->
    <div class="header-container">
      <div class="logo-item">
        <!-- 图标组件 -->
        <Logo />
      </div>
      <div class="menu-item">
        <!-- 菜单组件 -->
        <Menu />
      </div>
      <div
        class="other-item"
        :style="{
          background: themeStore.isBusiness ? '#001529' : '',
          color: themeStore.isBusiness ? '#fff' : '',
        }"
      >
        <HeaderRight />
      </div>
    </div>
    <div v-if="themeStore.multiTabs">
      <a-divider />
      <!-- 顶部页签 -->
      <router-tags />
    </div>
  </a-layout-header>
</template>

<script setup>
import { ref, onMounted } from "vue";
import HeaderRight from "@/components/common/right/Index.vue";
import RouterTags from "@/components/common/tags/Index.vue";
import { useThemeStore } from "@/stores/models/theme";
//引入logo组件
import Logo from "@/components/common/logo/Index.vue";
import Menu from "@/components/common/menu/Index.vue";

const themeStore = useThemeStore();
</script>
<style scoped lang='scss'>
.ant-layout-header {
  padding: 0;
  width: 100%;
  height: $header-height;
  line-height: 0;

  &.tabsSytle {
    height: $base-header-height;
    transition: all 0.3s;
  }
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $base-header-height;
  width: 100%;
}

.header-container .logo-item {
  width: $base-topMode-left-width;
}

.header-container .menu-item {
  width: calc(100vw - $base-topMode-right-width - $base-topMode-left-width);
}

.header-container .other-item {
  width: $base-topMode-right-width;
  display: flex;
  align-items: center;
  height: 100%;
}

:deep(.ant-divider-horizontal) {
  margin: 0;
  padding: 0;
}
</style>